<template>
  <a-modal :footer="null" title="用户详情" @cancel="btnClose" v-model:visible="isShowDetail">
    <a-descriptions title="个人详情">
      <a-descriptions-item label="用户名">{{ formData.username }}</a-descriptions-item>
      <a-descriptions-item label="手机号">{{ formData.mobile }}</a-descriptions-item>
      <a-descriptions-item label="头像">
        <a-avatar :src="formData.staffPhoto"></a-avatar>
      </a-descriptions-item>
      <a-descriptions-item label="工号">{{ formData.workNumber }}</a-descriptions-item>
      <a-descriptions-item label="聘用形式"></a-descriptions-item>
      <a-descriptions-item label="部门">
        {{ formData.defartmentName }}
      </a-descriptions-item>
      <a-descriptions-item label="入职时间">
        {{ formData.timeOfEntry }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script setup>
import { watch, ref, defineEmits, computed } from 'vue'
import { getEmployeeDetail } from '@/api/employee'

const emits = defineEmits(['update:showDetail'])
const props = defineProps({
  userId: String,
  showDetail: Boolean
})

const isShowDetail = computed({
  get: () => props.showDetail,
  set: (val) => emits('update:showDetail', val)
})

const formData = ref({})

watch(
  [() => props.showDetail, () => props.userId],
  () => {
    if (props.showDetail && props.userId) {
      fetchUserDetail()
    }
  },
  {
    immediate: true
  }
)
const fetchUserDetail = async () => {
  formData.value = await getEmployeeDetail(props.userId)
}
const btnClose = () => {
  emits('update:showDetail', false)
}
</script>
